<template>
	<div>
		<h1>{{ msg }}</h1>
		<input type="text" v-model="msg" />
		<ul>
			<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
		</ul>
	</div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
	name: 'Home',
	metaInfo: {
		title: 'home',
		// override the parent template and just use the above title only
	},
	data() {
		return {
			msg: 'hello ssr',
		};
	},
	computed: {
		...mapState(['posts']),
	},
	serverPrefetch() {
		return this.getPosts();
	},
	methods: {
		...mapActions(['getPosts']),
	},
};
</script>
